<template>
  <div class="select_layer" v-show="showScreen">
    <van-collapse v-model="activeName" accordion @change="changeCollapseItem">
      <van-collapse-item :title="dropdownValues.BuildName == '' ? '整栋楼栋' : dropdownValues.BuildName" name="1">
        <div slot="icon">
          <img class="icon_down" src="../../../assets/imgs/select_down.png">
        </div>
        <van-radio-group v-model="dropdownValues.BuildName">
          <van-radio
            v-for="(item,index) in buildingList"
            :key="index"
            @click="clickTung(item)"
            :name="item.value"
            class="my-radio"
          >{{item.label}}</van-radio>
        </van-radio-group>
      </van-collapse-item>
      <van-collapse-item :title="dropdownValues.Specialty == '' ? '全部专业' : dropdownValues.Specialty" name="2" v-if="showSpecialty">
        <div slot="icon">
          <img class="icon_down" src="../../../assets/imgs/select_down.png">
        </div>
        <van-radio-group v-model="dropdownValues.Specialty">
          <van-radio
            v-for="(item,index) in specialtyList"
            :key="index"
            @click="clickMajor(item)"
            :name="item.value"
            class="my-radio"
          >{{item.label}}</van-radio>
        </van-radio-group>
      </van-collapse-item>
      <van-collapse-item :title="dropdownValues.Floor == '' ? '全部楼层' : dropdownValues.Floor" name="3" v-if="showFloor">
        <div slot="icon">
          <img class="icon_down" src="../../../assets/imgs/select_down.png">
        </div>
        <van-radio-group v-model="dropdownValues.Floor">
          <van-radio
            v-for="(item,index) in floorList"
            :key="index"
            @click="clickFloor(item)"
            :name="item.value"
            class="my-radio"
          >{{item.label}}</van-radio>
        </van-radio-group>
      </van-collapse-item>
      <van-collapse-item :title="dropdownValues.ResourceName == '' ? '全部物资' : dropdownValues.ResourceName" name="4" v-if="showResourceName">
        <div slot="icon">
          <img class="icon_down" src="../../../assets/imgs/select_down.png">
        </div>
        <van-radio-group v-model="dropdownValues.ResourceName">
          <van-radio
            v-for="(item,index) in resourceList"
            :key="index"
            @click="clickResources(item)"
            :name="item.value"
            class="my-radio"
          >{{item.label}}</van-radio>
        </van-radio-group>
      </van-collapse-item>
      <van-collapse-item :title="dropdownValues.TaskId == '' ? '进度节点' : dropdownValues.TaskId" name="5" v-if="showTask">
        <div slot="icon">
          <img class="icon_down" src="../../../assets/imgs/select_down.png">
        </div>
        <van-radio-group v-model="dropdownValues.TaskId">
          <van-radio
            v-for="(item,index) in taskList"
            :key="index"
            @click="clickNode(item)"
            :name="item.value"
            class="my-radio"
          >{{item.label}}</van-radio>
        </van-radio-group>
      </van-collapse-item>
    </van-collapse>
    <div class="btn">
      <button class="reset" @click="resetFunc">重置</button>
      <div class="line"></div>
      <button class="check" @click="recordCheck">确认</button>
    </div>
  </div>
</template>

<script type='textecmascript-6'>
import { GetBuilding, GetSpecialtybyBuilding, GetFloorbyBuilding, GetResourceBySpInfo, GetTaskByInfo } from "@/api/api.js";
export default {
    data() {
        return {
            ProjectID: localStorage.getItem('projectid'),  //项目ID
            userID: localStorage.getItem("userId"),  //用户ID
            activeName: "",  //默认不展开
            // showScreen: false,  //默认不显示筛选
            dropdownValues:{
                BuildName: '',  //整栋模型
                Specialty: '',  //专业
                Floor: '',  //楼层
                TaskId: '',  //进度节点ID
                ResourceName: ''  //物资名称
            },
            buildingList: [],  //整栋模型列表
            specialtyList: [],  //专业列表
            floorList: [],  //楼层列表
            taskList: [],  //进度节点列表
            resourceList: []  //物资列表
        }
    },
    props: {
        showScreen: {
            type: Boolean,
            default: false
        },
        showSpecialty: {
            type: Boolean,
            default: true
        },
        showFloor: {
            type: Boolean,
            default: true
        },
        showTask: {
            type: Boolean,
            default: true
        },
        showResourceName: {
            type: Boolean,
            default: true
        },
    },
    methods:{
        /**
         * @name 获取模型的楼栋数据
         */
        async getBuildingData(){
            let buildingData = await this.Request(GetBuilding({projectid: this.ProjectID}),)
            if(buildingData.StatusCode == 200){
                this.buildingList = [];
                this.buildingList.unshift({label: "整体楼栋", value: ""})
                for (let i = 0; i < buildingData.Detiel.length; i++) {
                    let Option = {};
                    Option.label = buildingData.Detiel[i].text;
                    Option.value = buildingData.Detiel[i].id;
                    this.buildingList.push(Option);
                }
            }else{
                this.$toast({
                    type: 'fail',
                    message: buildingData.message ? buildingData.message : '后台异常',
                    className: "my-toast"
                })
            }
        },
        /**
         * @name 根据楼栋获取模型的专业
         */
        async getSpecialtyData(){
            let specialtyData = await this.Request(GetSpecialtybyBuilding({projectid: this.ProjectID, building: this.dropdownValues.BuildName}),)
            if(specialtyData.StatusCode == 200){
                this.specialtyList = [];
                this.specialtyList.unshift({label: "全部专业", value: ""})
                if(specialtyData.Detiel.length > 0){
                    for (let i = 0; i < specialtyData.Detiel.length; i++) {
                        let Option = {};
                        Option.label = specialtyData.Detiel[i].text;
                        Option.value = specialtyData.Detiel[i].id;
                        this.specialtyList.push(Option);
                    }
                }else{
                    this.specialtyList = []
                }
            }else{
                this.$toast({
                    type: 'fail',
                    message: specialtyData.message ? specialtyData.message : '后台异常',
                    className: "my-toast"
                })
            }
        },
        /**
         * @name 根据楼栋获取模型的楼层
         */
        async getFloorData(){
            let floorData = await this.Request(
                GetFloorbyBuilding({
                    projectid: this.ProjectID, 
                    building: this.dropdownValues.BuildName,
                    specialty: this.dropdownValues.Specialty
                })
            )
            if(floorData.StatusCode == 200){
                this.floorList = [];
                this.floorList.unshift({label: "全部楼层", value: ""})
                if(floorData.Detiel.length > 0){
                    for (let i = 0; i < floorData.Detiel.length; i++) {
                        let Option = {};
                        Option.label = floorData.Detiel[i].text;
                        Option.value = floorData.Detiel[i].id;
                        this.floorList.push(Option);
                    }
                }else{
                    this.floorList = []
                }
            }else{
                this.$toast({
                    type: 'fail',
                    message: floorData.message ? floorData.message : '后台异常',
                    className: "my-toast"
                })
            }
        },
        /**
         * @name 根据楼栋楼层专业获取物资名称
         */
        async getResourceData(){
            let resourceData = await this.Request(
                GetResourceBySpInfo({
                    ProjectID: this.ProjectID, 
                    BuildName: this.dropdownValues.BuildName,
                    Specialty: this.dropdownValues.Specialty,
                    Floor: this.dropdownValues.Floor
                })
            )
            if(resourceData.StatusCode == 200){
                this.resourceList = [];
                this.resourceList.unshift({label: "全部物资", value: ""})
                if(resourceData.Detiel.length > 0){
                    for (let i = 0; i < resourceData.Detiel.length; i++) {
                        let Option = {};
                        Option.label = resourceData.Detiel[i].text;
                        Option.value = resourceData.Detiel[i].id;
                        this.resourceList.push(Option);
                    }
                }else{
                    this.resourceList = []
                }
            }else{
                this.$toast({
                    type: 'fail',
                    message: resourceData.message ? resourceData.message : '后台异常',
                    className: "my-toast"
                })
            }
        },
        /**
         * @name 根据楼栋楼层专业获取任务（进度）名称
         */
        async getTaskData(){
            let taskData = await this.Request(
                GetTaskByInfo({
                    ProjectID: this.ProjectID, 
                    BuildName: this.dropdownValues.BuildName,
                    Specialty: this.dropdownValues.Specialty,
                    Floor: this.dropdownValues.Floor,
                    ResourceName: this.dropdownValues.ResourceName
                })
            )
            if(taskData.StatusCode == 200){
                this.taskList = [];
                this.taskList.unshift({label: "进度节点", value: ""})
                if(taskData.Detiel.length > 0){
                    for (let i = 0; i < taskData.Detiel.length; i++) {
                        let Option = {};
                        Option.label = taskData.Detiel[i].text;
                        Option.value = taskData.Detiel[i].id;
                        this.taskList.push(Option);
                    }
                }else{
                    this.taskList = []
                }
            }else{
                this.$toast({
                    type: 'fail',
                    message: taskData.message ? taskData.message : '后台异常',
                    className: "my-toast"
                })
            }
        },
        /**
         * @name 切换折叠面板时触发
         * @param {string | array} activeNames
         */
        changeCollapseItem(activeNames){
            console.log("==折叠面板 activeNames==", activeNames)
            switch (activeNames) {
                case "1":
                {
                    this.getBuildingData()
                }
                break;
                case "2":
                {
                    if(this.dropdownValues.BuildName === ""){
                        this.$toast({
                            message: '请先选择楼栋！',
                            className: "my-toast"
                        });
                        return;
                    }
                }
                break;
                case "3":
                {
                    if(this.dropdownValues.Specialty === ""){
                        this.$toast({
                            message: '请先选择专业！',
                            className: "my-toast"
                        });
                        return;
                    }
                }
                break;
                case "4":
                {
                    if(this.dropdownValues.Floor === ""){
                    this.$toast({
                        message: '请先选择楼层！',
                        className: "my-toast"
                    });
                    return;
                    }
                }
                break
                case "5":
                {
                    if(this.dropdownValues.ResourceName === ""){
                        this.$toast({
                            message: '请先选择物资名称！',
                            className: "my-toast"
                        });
                        return;
                    }
                }
                break;
            
                default:
                break;
            }
        },
        // 重置
        resetFunc() {
            // for (let k of Object.keys(this.dropdownValues)) {
            //     this.dropdownValues.k = ''
            // }
            this.dropdownValues.BuildName = ''
            this.dropdownValues.Specialty = ''
            this.dropdownValues.Floor = ''
            this.dropdownValues.ResourceName = ''
            this.dropdownValues.TaskId = ''
        },
        //确认 
        recordCheck() {
            this.$emit('searchFrom', this.dropdownValues)
            // console.log('确认',this.screen_list)
            // this.page = 1;
            // this.costControlLists = []
            // this.getCostData()
            // this.shwoScreen = false
        },
        //选中楼栋
        clickTung(item) {
            // console.log(item,'clickTung')
            // this.screen_list.push(item)
            this.dropdownValues.BuildName = item.value;
            this.dropdownValues.Specialty = ''
            this.dropdownValues.Floor = ''
            this.dropdownValues.ResourceName = ''
            this.dropdownValues.TaskId = ''
            if(this.showSpecialty){
              this.getSpecialtyData()
            }
        },
        //选中专业
        clickMajor(item) {
            this.dropdownValues.Specialty = item.value;
            this.dropdownValues.Floor = ''
            this.dropdownValues.ResourceName = ''
            this.dropdownValues.TaskId = ''
            if(this.showFloor){
              this.getFloorData()
            }
        },
        //选中楼层
        clickFloor(item) {
            this.dropdownValues.Floor = item.value;
            this.dropdownValues.ResourceName = ''
            this.dropdownValues.TaskId = ''
            if(this.showResourceName){
              this.getResourceData()
            }
        },
        //选中物资
        clickResources(item) {
            this.dropdownValues.ResourceName = item.value;
            this.dropdownValues.TaskId = ''
            if(this.showTask){
              this.getTaskData()
            }
        },
        //选中进度节点
        clickNode(item) {
            this.dropdownValues.TaskId = item.value;
        }
    }
}
</script>
<style>
@import "~@/assets/css/resetVant.css";
/*右上角点击筛选样式*/ 
.select_layer {
  position: fixed;
  top: 80px;
  right: 14px;
  width: 352px;
  box-sizing: border-box;
  background-color: #222832;
  opacity:0.9;
  border-radius:8px;
  padding: 10px 20px;
  z-index: 999;
}
.select_layer .van-hairline--top-bottom::after{
  border: none;
}
.select_layer .van-hairline--top::after {
  border-top: none;
  border-bottom: 1px solid #737577;
}
.select_layer .van-collapse  {
  max-height: 1109px;
}
.select_layer .van-collapse-item .van-collapse-item__title--expanded::after {
  visibility: hidden;
}
.select_layer .van-collapse-item:first-child {
  border-bottom: 1px solid #737577;
}
.select_layer .van-collapse-item__title {
  height: 80px;
  line-height: 80px;
  background-color: #222832;
}
.select_layer .van-cell__title{
  font-size: 30px;
  color: #fff;
  text-align: left;         
}
.select_layer .van-cell__right-icon {
  color: transparent;
}
.select_layer .icon_down {
  position: absolute;
  top: 45px;
  right: 30px;
  width: 16px;
  height: 11px;
}
.select_layer .van-collapse-item__content{
  padding: 0;
  background-color: #222832;
  color: #fff;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 500px;
}
.select_layer .van-cell {
  width: 100%;
  background-color: #222832;
  color: #fff;
}
.select_layer .van-radio {   
  height: 80px;
  line-height: 80px;
  height: 80px;
  /* padding-left:20px; */
  border-bottom: 1px solid #737577;
  font-size: 28px;
}
.select_layer .van-radio:last-child {
  border: 0;
}
.select_layer .van-radio .van-radio__label {
  color: #fff;
  vertical-align: baseline;
}
/* .select_layer .van-radio .van-radio__icon {
  vertical-align: baseline;
} */
/* .select_layer .van-radio .van-radio__icon .van-icon {
  border: 2px solid #fff;
  width: 25px;
  height: 25px;
} */
.select_layer .btn {
  width: 100%;
  height: 88px;
  padding: 19px 0;
  box-sizing: border-box;
}
.select_layer button {
  width:49%;
  height: 50px;
  line-height: 50px;
  background-color: #222934;
  color: #fff;
  font-size: 30px;
  text-align: center;
  border: none;
}
.select_layer .line {
  display: inline-block;
  width: 0px;
  height: 50px;
  border-left: 2px dashed #fff;
  vertical-align: top;
}
.select_layer:after {
  position: absolute;
  top: -0.379rem;
  right: 0.186667rem;
  content: '';
  width: 0px;
  height: 0px;
  border: 15px solid transparent;
  border-bottom: 15px solid #222832;
  z-index: 9999
}
.select_layer .van-radio__icon, .container-cost_control .van-radio__label{
  display: inline;
}
</style>
